// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.meego 1.0
import "Variable.js" as Variable

//"http://api.fmylife.com/account/infos?login=beter93&key=4fd9d0cb0463c&language=fr"
Page{
    id: page_user
    property string titlePage: "Espace Utilisateur"
    onVisibleChanged: recharge();
    tools: ToolBarLayout {
            id: toolBarLayout
            ToolIcon {
                id: toolicon1
                   visible: true
                   platformIconId: "toolbar-back"
                   onClicked: {
                       pageStack.pop();
                   }
               }
    }
    onHeightChanged: {
        hearder.height = parent.width < parent.height ? 72 : 46
    }
    function recharge(){
        xmlModel_user.xml = Variable.xmlDataUser;
        xmlModel_user.reload();
    }
    function reLoadingInfo(){
        image_user.source = xmlModel_user.get(0).photo
        label_speudo.text = xmlModel_user.get(0).login
        label_civiliter.text = "<u>"+"Civilité:"+"</u> <b> "+xmlModel_user.get(0).title+ "</b>"
        label_apropos.text = xmlModel_user.get(0).description
        label_age.text = "<u>"+"Age: "+"</u> <b> "+ xmlModel_user.get(0).age+ "</b>"
        label_visite.text = "<u>"+"Nombre de visite profile:"+"</u> <b> "+ xmlModel_user.get(0).visite + "</b>"
        label_nbComms.text = "<u>"+"Nombre de commentaire:"+"</u> <b> "+ xmlModel_user.get(0).comments+ "</b>"
        label_nbVDM.text = "<u>"+"Nombre de VDM soumis:"+"</u> <b> "+ xmlModel_user.get(0).soumis+ "</b>"
    }

    Header{
        id: hearder
        height: 72
        z:1
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        title: titlePage
        Behavior on height { NumberAnimation { duration: 200 }}
    }

    XmlListModel{
        id: xmlModel_user
//        source: "http://api.fmylife.com/account/infos?login=beter93&key=4fd9d0cb0463c&language=fr"
        query: "/root/infos"
        XmlRole { name: "id"; query: "id/string()"}
        XmlRole { name: "login"; query: "login/string()" }
        XmlRole { name: "city"; query: "city/string()" }
        XmlRole { name: "pays"; query: "country/string()" }
        XmlRole { name: "title"; query: "title/string()" }
        XmlRole { name: "anniv"; query: "birthdate/string()" }
        XmlRole { name: "age"; query: "age/string()" }
        XmlRole { name: "visite"; query: "visits/string()" }
        XmlRole { name: "description"; query: "description/string()" }
        XmlRole { name: "heurZone"; query: "timezone/string()" }
        XmlRole { name: "hide"; query: "hide/string()" }
        XmlRole { name: "photo"; query: "photo/string()" }
        XmlRole { name: "comments"; query: "comments/string()" }
        XmlRole { name: "soumis"; query: "stories/submitted/string()" }
        XmlRole { name: "publier"; query: "stories/published/string()" }

        onXmlChanged: {
            xmlModel_user.errorString();
        }
//        onSourceChanged: {
//            console.debug("[User] Source Changed : " + source)
//            xmlModel_user.reload();
//            reLoadingInfo()
//        }

        onStatusChanged: {
//            Utilisateur.login = xmlModel_user.get(0).login;
            reLoadingInfo()
        }
    }


    Flickable{
        id: flickable
        z:0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.top: hearder.bottom
        anchors.topMargin: 0
        contentHeight: page_user.height * 1.5
        ShadowRectangle{
            id: rect_image
            width: 200
            height: 200
            radius: 5
            anchors.top: hearder.bottom
            anchors.topMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.rightMargin: 5
            color: "white"

            ShadowRectangle{
                id: rect_image2
                color: "transparent"
                radius: 5
                anchors.rightMargin: 9
                anchors.leftMargin: 9
                anchors.bottomMargin: 5
                anchors.topMargin: 5
                anchors.fill: parent

                Image {
                    id: image_user
                    y: 6
                    height: 100
                    fillMode: Image.PreserveAspectFit
                    anchors.fill: parent
                    asynchronous: true
                }
            }
        }
        Label {
            id: label_residence
            height: 20
            text: xmlModel_user.get(0).login
            anchors.right: parent.right
            anchors.rightMargin: 20
            anchors.top: label_speudo.bottom
            anchors.topMargin: 20
            font.underline: false
            anchors.left: parent.left
            anchors.leftMargin: 10
            wrapMode: Text.WordWrap
        }

        Label {
            id: label_speudo
            height: 36
            font.pointSize: 15
            horizontalAlignment: Text.AlignHCenter
            anchors.left: parent.left
            anchors.leftMargin: 50
            anchors.right: parent.right
            anchors.rightMargin: 50
            anchors.top: rect_image.bottom
            anchors.topMargin: 20
            wrapMode: Text.WordWrap
        }

        Label {
            id: label_civiliter
            height: 20
            anchors.right: parent.right
            anchors.rightMargin: 20
//            text: xmlModel_user.get(0).login
            anchors.top: label_residence.bottom
            anchors.topMargin: 10
            wrapMode: Text.WordWrap
            anchors.leftMargin: 10
            anchors.left: parent.left
        }

        Label {
            id: label_age
            height: 20
            text: xmlModel_user.get(0).login
            anchors.right: parent.right
            anchors.rightMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.top: label_civiliter.bottom
            anchors.topMargin: 15
            wrapMode: Text.WordWrap
        }

        Label {
            id: label_visite
            y: -10
            height: 20
            anchors.right: parent.right
            anchors.rightMargin: 20
            anchors.top: label_age.bottom
            anchors.topMargin: 10
            wrapMode: Text.WordWrap
            anchors.leftMargin: 10
            anchors.left: parent.left
        }

        Label {
            id: label_nbComms
            y: -2
            height: 20
            text: xmlModel_user.get(0).login
            anchors.right: parent.right
            anchors.rightMargin: 20
            anchors.top: label_visite.bottom
            anchors.topMargin: 10
            wrapMode: Text.WordWrap
            anchors.leftMargin: 10
            anchors.left: parent.left
        }

        Label {
            id: label_nbVDM
            y: 1
            height: 20
            text: xmlModel_user.get(0).login
            anchors.right: parent.right
            anchors.rightMargin: 20
            anchors.top: label_nbComms.bottom
            anchors.topMargin: 10
            wrapMode: Text.WordWrap
            anchors.leftMargin: 10
            anchors.left: parent.left
        }

        Label {
            id: label_clsModeration
            y: 6
            height: 20
            text: xmlModel_user.get(0).login
            anchors.right: parent.right
            anchors.rightMargin: 20
            anchors.top: label_nbVDM.bottom
            anchors.topMargin: 10
            wrapMode: Text.WordWrap
            anchors.leftMargin: 10
            anchors.left: parent.left
        }

        Text {
            id: text_apropos
            x: 3
            width: 81
            height: 20
            text: qsTr("A Propos:")
            font.underline: true
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 16
            anchors.top: label_clsModeration.bottom
            anchors.topMargin: 20
            font.bold: false
        }

        TextArea {
            id: label_apropos
            x: -18
            y: 9
            text: xmlModel_user.get(0).login
            anchors.right: parent.right
            anchors.rightMargin: 20
            anchors.top: text_apropos.bottom
            anchors.topMargin: 10
            wrapMode: Text.WordWrap
            anchors.leftMargin: 20
            anchors.left: parent.left
            readOnly: true
        }
    }
}
